<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/website/common/base.jsp"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>申请退货</title>
<%@ include file="/website/common/common.jsp"%>
<link href="${webctx }/css/manage.css" rel="stylesheet" type="text/css" />
<link href="${webctx }/css/order.css" rel="stylesheet" type="text/css" />
<style>
.buy-numInp{float:left;}
</style>
</head>

<body>
<%@ include file="/website/common/top.jsp"%>
<%@ include file="/website/common/head.jsp"%>
<%@ include file="/website/common/menu.jsp"%>

<div class="warp-body">
	<div class="inner clearfix">
    	<div class="left-main">
        	<div class="left-inner">
            	<%@ include file="/website/user/left.jsp"%>
            </div>
        </div>
    	<div class="right-main">
        	<div class="right-inner" id="orderlistpanel">
            	<div class="orderinfo" style=" background-color:#fff">
					<div class="right-title"><span></span>申请退货</div>
					<div class="line8"></div>
					<div class="tuiht">
						<ul>
						<li><img src="${webctx }/images/jing.jpg" style="margin-top:12px;margin-right:10px"></li>
						<li>
							<p>退货须知：</p>
							<p>1、选择订单商品进行退货</p>
							<p>2、填写退货原因并及时与我们工作人员联系</p>
						</li>
						</ul>
					</div>
					<div style="padding:0px 10px;">
						<!--  -->
						<div class="hh">商品清单</div>
						<div class="addre-con" style="width:100%;padding:0px;margin:0px;">
					   		<ul>
					             <li class="th">
					                  <span class="d1">订单信息</span>
					                  <span class="d2">商品价格</span>
					                  <span class="d3">数量</span>
					                  <span class="d4">退货数量</span>
					                  <span class="d5">操作</span>
					            </li>
					            <c:forEach items="${products }" var="product" varStatus="status">
					                    <li class="tr" style="border-width:1px;background-color:#fff">
					                     	<span class="d1" style="text-align:left">
					                     		<div class="td-inner">
					                     			<div style="float:left"> <a href="${ctx }/product/info?priceid=${product.id}" target="_blank"><img src="<%=getRandomFileserver()%>${product.photo}" width="90" height="90" alt=""></a></div>
					                     			<div style="float:left;padding-left:15px;">
					                      			<p><strong>${product.productname } ${product.name }</strong></p>
					                      			<p><span style="width:320px;">生产厂家：${product.B_chanjia }</span><span>件装量：${product.B_zhuanl }</span></p>
					                      			<p><span style="width:320px;">规　　格：${product.B_guige }</span><span>单　位：${product.unitname }</span></p>
					                      			<p><span style="width:320px;">批准文号：${product.B_pzwh }</span><span>可拆零：${product.B_kechai }</span></p>
					                     			</div>
					                      </div>
					                     </span>
					                        <span class="d2 ptd">￥${product.buyprice }</span>
					                        <span class="d3 ptd">×${product.buyamount }</span>
					                        <span class="d4 ptd">
					                        	 <div class="buy-Num-bd" style="margin-top:35px">
				                                    <input name="tuihnumInp" pid="${product.id }" id="tuihnumInp${product.id }" type="text" class="buy-numInp" value="${product.buyamount }" onchange="changeamount(this)" amount="${product.buyamount }"/>
				                                    <span class="btn-reduce" onclick="lessenamount(${product.id })">-</span>
				                                    <span class="btn-add" onclick="addamount(${product.id })">+</span>                        
				                                </div>	
					                        </span>
					                        <span class="d5 ptd" style="padding-top:30px;">
					                         	<a href="javascript:;" onclick="del(this)">删除</a>
					                        </span>
					                </li>
					             </c:forEach>
					        </ul>
					    </div>
					    <div class="line8"></div>
						<div class="tht">填写退货信息</div>
						<div class="line8"></div>
						<ul class="thul">
							<li>
								<label>退货理由：</label>
								<textarea name="reason" style="height:100px;width:500px"></textarea>
							</li>
							<li>
								<label>上传凭证：</label>
								<div>
									<div class="fl"><a href="javascript:;" class="upbtn" id="upimgbtn">选择凭证图片</a></div>
									<div id="upimgs"></div>
								</div>
								<div class="clear"></div>
								<div class="ms">
									<p>为了帮助我们更好的解决问题，请您上传图片</p>
									<p>最多可上传6张图片，每张图片大小不超过1M，支持jpg,png,jpeg格式文件</p>
								</div>
							</li>
							<li>
								<label>手机号码：</label>
								<input name="phone" value="${order.receipt_phone }">
							</li>
							<div class="line8"></div>
							<li>
								<label>&nbsp;</label>
								<a href="javascript:ok();" class="btn green marginR16">提交申请</a><a href="javascript:;" onclick="window.history.back();return false;" class="btn">取消并返回</a>
							</li>
							<div class="line8"></div>
							<div class="line8"></div>
						</ul>
						<!--  -->
					</div>
					
            	</div>
            </div>
            <div class="right-inner hide" id="msgdiv">
            	<div class="orderinfo">
					<div class="right-title"><span></span>申请退货</div>
					<div class="line8"></div>
					<div class="fl">
						<span class="thokimg"><img src="${webctx }/images/ok_y.png"></span>
					</div>
					<div class="thoktxt">
						<p class="p1" id="thoktxt">退货申请已生效，请耐心等待处理哦！</p>
						<div class="line8"></div><div class="line8"></div>
						<p class="p2"><a href="${ctx }/order/orderlist" class="btn green">返回我的订单</a></p>
					</div>
				</div>
            </div>
        </div>
    </div>
</div>
<input name="ordercode" type="hidden" value="${order.code }">
<%@ include file="/website/common/foot.jsp"%>
<link type="text/css" rel="stylesheet" href="${webctx }/css/webeasyui.css">
<script type="text/javascript" src="${ctx }/util/js/easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx }/util/js/easyui-1.3.3/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
<script type="text/javascript" src="${ctx}/plugins/plupload2/plupload.full.min.js"></script>
<script>
var uploader;
$(function(){
	setLeftCur("orderlist");
	
	uploader = new plupload.Uploader({
		runtimes : 'html5,flash,silverlight,html4',
		browse_button :'upimgbtn',
		url : ctx+'/upload/UploadPage@uploadPhoto.page?dir=order',
		flash_swf_url : ctx+'/plugins/plupload2/Moxie2.swf',
		silverlight_xap_url : ctx+'/plugins/plupload2/Moxie.xap',
		multi_selection:true,
		filters: {
			max_file_size : '1mb',
			prevent_duplicates :false, //不允许选取重复文件
		  	mime_types : [ //只允许上传图片文件
		    { title : "图片文件", extensions : "jpg,png,jpeg" }
		  	]
		},init:{
			FilesAdded: function(up, files) {
				var len=$("[name='photos']").length;
				if(len+files.length>6){
					alert("最多上传6张图片");
					for(var i=0;i<files.length;i++){
						uploaderobj.removeFile(files[i]);
					}
				}else{
					if(files.length>0)pedit_prewn--;
					for(var i=0;i<files.length;i++){
						pedit_loadfs.push(files[i]);
						var html="<div class='pl_upimgdiv' id='img_"+files[i].id+"'><img src='"+ctx+"/images/imgloading.png' /><input name='photos' type='hidden'/><div class='progressbg'></div><div class='progresstxt'>等待上传</div><i class='remove' onclick='delup(this,true)'></i></div>";
						$("#upimgs").append(html);
					}
					pedit_loadprew();
				}
				
			},UploadFile:function(up,file){
				var f=$('#img_'+file.id);
				$(".progresstxt",f).show();
			},UploadProgress:function(up,file){
				var f=$('#img_'+file.id);
				var d=$(".progressbg",f);
				var w=f.width()*parseInt(file.percent)/100;
				d.css("width",w+"px");
				$(".progresstxt",f).html(file.percent+"%");
			},FileUploaded:function(up,file,responseObject){
				var re=jQuery.parseJSON(responseObject.response);
				$("input",$('#img_'+file.id)).val(re.pid);
			},UploadComplete:function(){
				submitdata();
			},Error:function(up, err){
				if(err.code!="-602"){
					if(err.code=="-600")
						alert("图片大小不能超过1M");
					else
						alert(err.code+"-"+err.message);
				}
				return false;
			}
		}
	});
	uploader.init();
})

function lessenamount(pid){
  var txt=$("#tuihnumInp"+pid);
  var n=0;
  if(txt.val()!='')n=parseInt(txt.val());
  n--;
  if(n<=0)n=0;
  txt.val(n);
  changeamount(txt.get(0));
}
function addamount(pid){
 var txt=$("#tuihnumInp"+pid);
 var n=0;
 if(txt.val()!='')n=parseInt(txt.val());
  n++;
  txt.val(n);
  changeamount(txt.get(0));
}
function changeamount(obj){
	if(parseInt(obj.value)>parseInt($(obj).attr("amount")))
		obj.value=$(obj).attr("amount");
}
function del(obj){
	$(obj).parent().parent().remove();
}
var pedit_loadfs=[];
var pedit_fr;
var pedit_prewn=0;
function previewImages(file,callback){
	if(!file || !/image\//.test(file.type)) return;
	if(file.type=='image/gif'){
		var fr = new mOxie.FileReader();
		fr.onload = function(){
			callback(fr.result);
		}
		fr.readAsDataURL(file.getSource());
	}else{
		var preloader = new mOxie.Image();
		preloader.onload = function() {
			preloader.downsize( 100, 100 );
			var imgsrc = preloader.type=='image/jpeg' ? preloader.getAsDataURL('image/jpeg',80) : preloader.getAsDataURL();
			callback && callback(imgsrc); 
			preloader.destroy();
			preloader = null;
		};
		preloader.load( file.getSource() );
	}	
}
//生成预览图
function pedit_loadprew(){
	pedit_prewn++;
	if(pedit_prewn<pedit_loadfs.length){
		previewImages(pedit_loadfs[pedit_prewn],function(imgsrc){
			$("img",$("#img_"+pedit_loadfs[pedit_prewn].id)).attr('src',imgsrc);
			if(pedit_fr){
				pedit_fr.destroy();
				pedit_fr = null;
			}
			pedit_loadprew();
		})
	}
}
var subing=false;
var pids="";
function ok(){
	pids="";
	$("[name='tuihnumInp']").each(function(){
		if(parseInt(this.value)>0){
			if(pids!="")pids+=",";
			pids+="{\"pid\":\""+$(this).attr("pid")+"\",\"amount\":\""+this.value+"\"}";
		}
	});
	if(pids==""){
		alertmsg("请选择退货商品");
		return;
	}if($("[name='reason']").val()==""){
		alertmsg("请填写退货理由");
		return;
	}
	if(subing)return ;
	subing=true;
	if(uploader.files.length>0)
		uploader.start();
	else submitdata();
}
function submitdata(){
	var photos="";
	$("[name='photos']").each(function(){
		if(photos!="")photos+=",";
		photos+=this.value;
	});
	$w.httpRequest({
		url:apiroot+"/order/backorder",
		data:{"ordercode":$("[name='ordercode']").val(),"reason":$("[name='reason']").val(),"phone":$("[name='phone']").val(),"products":"["+pids+"]","photos":photos},
		ok:function(ret){
			showmsg();
			$(window).scrollTop(80);
		},all:function(){subing=false;}
	})
}
function alertmsg(msg){
	$w.openWin({html:'<div class="center alertmsg" style="margin:20px 0px">'+msg+'</div><div class="center" style="margin:10px 0px"><a href="javascript:;$w.closeCurrWin()" class="btn green">确定</a></div>',title:'信息提示',modal:true,w:400,h:180});
}
function showmsg(txt){
	if(txt)$("#thoktxt").html(txt);
	$("#orderlistpanel").hide();
	$("#msgdiv").show();
}
</script>
<c:choose>
<c:when test="${order.backtag==1}"><script>showmsg();</script></c:when>
<c:when test="${order.backtag==2}"><script>showmsg('您已经申请退货申请，并已被同意退货');</script></c:when>
<c:when test="${order.backtag==3}"><script>showmsg('您申请的退货申请已被拒绝！');</script></c:when>
</c:choose>
</body>
</html>
